<template lang="pug">
  div
    .dashboard-container(v-if="$route.path === '/teacherResource'")
      section.homepart(v-if="channel !== 'nicemama'")
        div.mbx
          span.ml24 直播课程
          div(@click="$router.push('/teacherResource/training/live')")
            span 更多直播
            img(src="@/assets/right.png")
        el-row(:gutter="20")
          el-col(:span="6" v-for="item in [...liveCourse,...liveCourse,...liveCourse,...liveCourse]" :key="item.id")
            .mediaBox
              .media
                img(:src="item.cover")
                span(v-if="item.type === 'video'")
                  i(class="el-icon-caret-right")
              .detail
                h3 {{item.title}}
                p
                  span
                    img.mr5(src="@/assets/baoming.png")
                    | {{item.visitorCount||0}}人已报名
                  span.yellow.mt15
                    img.mr5(src="@/assets/tiem.png")
                    | 开课时间 {{item.liveStartAt | dateFilter('YYYY/MM/DD HH:mm:ss')}}
                footer
                  el-row(type="flex" justify="space-between" align="middle")
                    el-col(:span="12")
                      <!--el-avatar.vm(:src="item.imgUrl" :size="40")-->
                      span.ml10.c_33.f15 {{item.lecturer}}
                    el-col.tr(:span="12")
                      el-button.gradientBtn.c_ff(v-if="item.liveStatus === 2 || item.liveStatus === 3" round size="medium" @click="playFun(item.alias)" ) {{item.liveStatus===2 ? '进入直播':'直播回放'}}
      section.homepart(v-if="channel !== 'nicemama'")
        div.mbx
          span.ml24 录播课程
          div(@click="$router.push('/teacherResource/training/record')")
            span 更多课程
            img(src="@/assets/right.png")
        el-row(:gutter="20")
          el-col(:span="6" v-for="item in hotCourse" :key="item.id")
            .mediaBox
              .media
                img(:src="item.imageUrl")
                span(v-if="item.type === 'video'")
                  i(class="el-icon-caret-right")
              .detail
                h3 {{item.title}}
                <!--p-->
                  <!--span {{item.areaName}}-->
                  <!--span.ml16-->
                    <!--i.mr5(class="el-icon-time")-->
                    <!--| {{item.time}}-->
                    footer
                  el-row(type="flex" justify="space-between" align="middle")
                    el-col(:span="12")
                      span.ml10.c_33.f15 {{item.author}}
                      el-button.gradientBtn2.gradientBtn.c_ff(round size="medium" @click="coursePlayFun(item.url)") 开始学习
      section.homepart
        div.mbx
          span.ml24 线下课程
          div(@click="$router.push('/teacherResource/training/offline')")
            span 更多线下
            img(src="@/assets/right.png")
        el-row(:gutter="20")
          el-col(:span="6" v-for="item in myCourse" :key="item.id")
            .mediaBox
              .media
                img(:src="item.cover")
                span(v-if="item.type === 'video'")
                  i(class="el-icon-caret-right")
              .detail
                h3 {{item.title}}
                p
                  span
                    i.mr5(class="el-icon-time")
                    | 开课时间 {{item.beginAt | dateFilter('YYYY/MM/DD HH:mm:ss')}}
                footer
                  el-row(type="flex" align="middle")
                    el-col(:span="12")
                      div.yq
                        el-avatar.vm(:src="item.staffHeadImg" :size="40")
                        span.ml10.c_33.f15 {{item.staffName}}
                    el-col(:span="12" style="display: flex;justify-content: flex-end;")
                      div
                        span.yellow
                          img.mr5(src="@/assets/Edit.png")
                          | {{item.visitorCount||0}}人已报名
                      <!--el-button.gradientBtn.c_ff(round size="medium" @click="playFun(item.alias)" ) 报名-->
      //my-study
      el-row.mt20(:gutter="20")
        el-col(:span="12")
          section.homepart
            h2 教保师学习排行榜
            .teachRankItem(v-for="(item, index) in teachRank" :key="item.id")
              .teachBox
                img.sort(:src="require(`@/assets/${index + 1}.png`)")
                span.avatarBox
                  el-avatar(:src="item.headImgUrl" :size="52")
                span.name {{item.realName}}
                el-button(size="mini" round) {{item.positionName}}
              .fd
                .duration
                  |〖学习时长〗
                  span.c_66 {{(random() * 10) }}分钟
                .score {{(50 - index)/10}}
        el-col(:span="12")
          section.homepart
            div.mbx
              span.ml24 素材库
              div(@click="$router.push('/teacherResource/training/source')")
                span 更多素材
                img(src="@/assets/right.png")
            el-row(:gutter="20")
              el-col(:span="12" v-for="item in materialLibrary" :key="item.id")
                .mediaBox
                  .media
                    el-image(v-if="item.resType === 'image'" :src="item.resURL" fit="cover" style="height: 230px; width: 100%;")
                    el-image(v-else fit="cover")
                  .detail
                    h3 {{item.title}}
                  footer.mt16
                    <!--el-avatar.vm(:src="item.resURL" :size="40")-->
                    span.c_33.f15 {{item.staffName}}
                    small.f13.c_99.ml20 {{item.intro}}
            <div class="quesheng" v-if="materialLibrary.length<=0">
              <img src="@/assets/quesheng.png" alt="">
              <span>暂无数据</span>
            </div>
          <!--.regularActivity-->
            <!--h3 定期活动-->
            <!--el-carousel(indicator-position="none" height="205px")-->
              <!--el-carousel-item(v-for="item in activities" :key="item.id")-->
                <!--el-link.w.block(to="/")-->
                  <!--img(:src="item.url")-->
    router-view(v-else)
</template>

<script>
import chunk from 'lodash/chunk'
import AImage from '@/components/Basic/Image'
import AvatarGroup from '@/components/Basic/AvatarGroup'
import MyStudy from './components/myStudy'
import { getDocList, playurlRequest } from './training/live/api'
import { getCourseList, courseGroupsReuqest } from './training/record/api'
import { getOtCourseList } from './training/offline/api'
import { getDocList as getDocument } from './training/source/api'
import { getTeachersByArea } from '@/api/common.js'
import StaticsEcharts from '@/views/basicData/components/studentStatics.vue'
export default {
  components: { StaticsEcharts, AImage, AvatarGroup, MyStudy },
  filters: {
    rowFilter (val, size = 4) {
      const list = Array.isArray(val) ? val : Array.of(val)
      console.log(chunk(list, size))
      return chunk(list, size)
    }
  },
  data () {
    return {
      loading: false,
      currentRole: 'adminDashboard',
      hotCourse: [],
      liveCourse: [],
      myCourse: [],
      teachRank: [],
      materialLibrary: [],
      activities: [
        {
          id: 0,
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-67920826-8887B7BC01ECE9F1086D303EB9DB93D0%2F0%3Ffmt%3Djpg%26size%3D14%26h%3D298%26w%3D400%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637484930&t=75630c4abd33faccd76d41c916b8e797'
        }
      ],
      channel: process.env.VUE_APP_CHANNEL
    }
  },
  created () {
    this.getLiveData()
    this.getCourseGroupFun()
    this.getOfflineCourseList()
    this.getDocument()
    this.getTeachers()
  },
  methods: {
    rowFilter (val, size = 4) {
      const list = Array.isArray(val) ? val : Array.of(val)
      return chunk(list, size)
    },
    // 直播课程
    getLiveData () {
      this.loading = true
      const prams = {
        pageNum: 0,
        pageSize: 4
      }
      getDocList(prams)
        .then((res) => {
          this.loading = false
          this.liveCourse = res.content
        })
        .finally(() => {
          this.loading = false
        })
    },

    playFun (alias) {
      const prams = {
        alias: alias
      }
      const newWindow = window.open()
      playurlRequest(prams)
        .then((res) => {
          newWindow.location.href = res
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 录播课程
    getCourseGroupFun () {
      courseGroupsReuqest({}).then((res) => {
        if (res.length > 0) {
          this.getCourseList(res[0].groupId)
        }
      })
    },
    getCourseList (groupId) {
      this.loading = true
      const prams = {
        pageNum: 0,
        pageSize: 4,
        groupId: groupId
      }
      getCourseList(prams)
        .then((res) => {
          this.loading = false
          this.hotCourse = res.content
        })
        .finally(() => {
          this.loading = false
        })
    },

    coursePlayFun (playUrl) {
      window.open(playUrl)
    },

    // 线下课程
    getOfflineCourseList () {
      this.loading = true
      const prams = {
        pageNum: 0,
        pageSize: 4
      }
      getOtCourseList(prams)
        .then((res) => {
          this.loading = false
          this.myCourse = res.content
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 素材库
    getDocument () {
      this.loading = true
      const prams = {
        dirType: 4,
        pageNum: 0,
        pageSize: 2
      }
      getDocument(prams)
        .then((res) => {
          this.loading = false
          this.materialLibrary = res.content
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 学习排行榜
    getTeachers () {
      const params = {
        pageNum: 0,
        pageSize: 6
      }
      getTeachersByArea(params).then((res) => {
        console.log(res)
        this.teachRank = res.content
      })
    },

    random () {
      return Math.ceil(Math.random() * 5)
    }
  }
}
</script>
<style lang="scss" scoped>
section {
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 24px;
}
.homepart {
  padding: 24px;
  h2{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 0;
  }
  .mediaBox {
    .media {
      position: relative;
      height: 250px;

      > img {
        width: 100%;
        height: 250px;
      }

      > span {
        position: absolute;
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 84px;
        text-align: center;
        left: 50%;
        top: 50%;
        border-radius: 30px;
        margin-top: -30px;
        margin-left: -30px;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;

        i {
          color: #fff;
          font-size: 40px;
        }
      }
    }

    .detail {
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #EBEBEE;
      padding: 16px 12px;
      width: 100%;
      position: relative;
      h3 {
        width: 100%;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 7px;
      }

      p {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #77778C;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        flex-direction: column;
        text-align: left;
      }
      span{
        display: flex;
        align-items: center;
      }
    }

    footer {
      .gradientBtn {
        display: flex;
        width: 80px;
        height: 32px;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }
}
.teachRankItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;

  + .teachRankItem {
    border-top: 1px solid #f4f4f4;
  }

  .sort {
    margin-right: 16px;
    vertical-align: middle;
    width: 44px;
  }

  .avatarBox {
    vertical-align: middle;
    border: 2px solid #fff;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 1px 2px 4px 4px rgba(0, 0, 0, 0.08);
  }

  .name {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 14px;
    color: #000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    margin-right: 8px;
  }

  .fd {
    display: flex;
    flex-direction: row;
    align-items: center;
    .duration {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #77778C;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .score {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #EB0000;
      font-style: normal;
      text-transform: none;
      min-width: 40px;
      text-align: right;
    }
  }
}

.regularActivity {
  margin-top: 20px;
  position: relative;

  > h3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 40px;
    z-index: 10;
    line-height: 40px;
    margin: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    font-size: 17px;
    font-family: PingFang SC;
    color: #ffffff;
  }

  img {
    width: 100%;
  }
}

.imgEllipseList {
  .imgBox {
    border: 1px solid #fff;
    + .imgBox {
      margin-left: -16px;
    }
  }
}
.mt15{
  margin-top: 15px;
}
.yq{
  display: flex;
}
.quesheng{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  img{
    margin-bottom: 12px;
  }
}
</style>
